<template>
	<view class="css-theme" :class="[cueTheme]" :style="{'background-color':pageBg}" style="float: left;width: 100%;min-height: 100%;">
		<view class="sharebtn">
			<view class="uni-share">
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box"
						@click='btnShare(index)'>
						<view class="uni-share-content-image">
							<image :src="item.icon" class="content-image" />
						</view>
						<text class="uni-share-content-text">{{ item.text }}</text>
					</view>
				</view>
				<!-- <view class="cancel" @click="cancel">取消</view> -->

			</view>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				bottomData: [{
						text: '微信',
						icon: '/static/images/weixin.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/images/pengyouquan.png',
						name: 'copy'
					},
					{
						text: 'QQ',
						icon: '/static/images/qq.png',
						name: 'qq'
					},

				],
				shareUrl:'https://tp.mmkjsh.cn/',
				user:[]

			}
		},
		props: {

		},

		watch: {

		},
		mounted() {
			var _self=this
			uni.getStorage({
				key: 'user',
				success: function(res) {
					if (res.data) {
						_self.user = res.data
						setTimeout(function() {
							_self.getCommonInfo()
						}, 200);
					}
				},
				fail: function(e) {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			})
		},
		methods: {
			getCommonInfo() {
				var _self = this
				var data = {
					userId: _self.user.id
				}
				this.$api.commonInfo(data).then((res) => {
					var resData = res;
					
					if (resData.code == "200") {
						_self.shareUrl = resData.data[0].info2
					}
				})
			},
			btnShare(ind) {
				var _self = this
				console.log(ind);
				var strProvider = "",
					strScene = "",
					mytype = '';
				switch (ind) {
					case 0:
						strProvider = "weixin"
						strScene = "WXSceneSession"
						mytype = 0
						break;
					case 1:
						strProvider = "weixin"
						strScene = "WXSenceTimeline"
						mytype = 0
						break;
					case 2:
						strProvider = "qq"
						mytype = 0
						break;
				}
				if (strProvider != "") {
					console.log(_self.shareUrl)
					uni.share({
						provider: strProvider, //分享服务提供商（即weixin|qq|sinaweibo）
						type: mytype, //图文
						scene: strScene, //provider 为 weixin 时必选 WXSceneSession分享到聊天界面，WXSceneTimeline分享到朋友圈，WXSceneFavorite分享到微信收藏
						title: '拾光记', //分享内容的标题
						summary: '记录让生活更美好！', //分享内容的摘要
						href: _self.shareUrl, //跳转链接，type 为 0 时必选
						imageUrl: '/static/logo.png', //图片地址，type 为 0、2、5 时必选
						success(res) {
							//成功返回的参数
							console.log(res);
						},
						fail(err) {
							//失败返回的参数
							console.log(err);
						}
					})

				}
			},


		}
	}
</script>

<style lang="scss" >
	page {
			height: 100%;
			width: 100%;
			margin: 0;
			background-color: $page-bg !important;
		}
		
		.css-theme {
			@include text-color();
			@include base-background();
			@include border-color();
			@include shadow-color();
		}
	/* 底部分享 */
	.sharebtn {

		.uni-share {
			width: 690rpx;
			margin: 30rpx;

			border-radius: 30rpx;
			/* #ifndef APP-NVUE */
			display: flex;
			flex-direction: column;
			/* #endif */
			// background-color: #fff;

			.uni-share-content {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: row;
				flex-wrap: nowrap;
				justify-content: center;
				overflow-x: scroll;
				padding: 15px 50rpx;

				.uni-share-content-box {
					/* #ifndef APP-NVUE */
					display: flex;
					/* #endif */
					flex-direction: column;
					align-items: center;
					// width: 25%;
					// justify-content: space-between;
					margin-right: 100rpx;

					&:nth-last-child(1) {
						margin-right: 0;
					}

					.uni-share-content-image {
						/* #ifndef APP-NVUE */
						display: flex;
						/* #endif */
						flex-direction: row;
						justify-content: center;
						align-items: center;
						width: 90rpx;
						height: 90rpx;
						overflow: hidden;
						border-radius: 10rpx;
						margin-top: 10px;
						// background-color: #f1f1f1;

						.content-image {
							width: 60rpx;
							height: 60rpx;
						}
					}

					// &:nth-last-child(1){
					// 	.uni-share-content-image .content-image {
					// 		width: 50rpx!important;
					// 		height: 50rpx!important;
					// 	}
					// }
					.uni-share-content-text {
						font-size: 26rpx;
						// color: #333;
						padding-top: 5px;
						
					}
				}
			}
		}
	}


	// 分享start

	.cu-modal {
		position: fixed;
		// top: 0;
		right: 0;
		bottom: 160px;
		left: 0;
		z-index: 1110;
		opacity: 0;
		// outline: 0;
		text-align: center;
		// -ms-transform: scale(1.185);
		// transform: scale(1.185);
		// backface-visibility: hidden;
		// perspective: 2000upx;
		// background: rgba(0, 0, 0, 0.6);
		// transition: all 0.3s ease-in-out 0s;
		// pointer-events: none;
	}

	.cu-modal::before {
		content: "\200B";
		display: inline-block;
		height: 100%;
		vertical-align: middle;
	}

	.cu-modal.show {
		opacity: 1;
		transition-duration: 0.3s;
		-ms-transform: scale(1);
		transform: scale(1);
		// overflow-x: hidden;
		overflow-y: auto;
		pointer-events: auto;
	}

	.cu-dialog {
		position: relative;
		display: inline-block;
		vertical-align: middle;
		margin-left: auto;
		margin-right: auto;
		// width: 680upx;
		max-width: 100%;
		background-color: #f8f8f8;
		border-radius: 10upx;
		overflow: hidden;
	}

	//分享end
	.cancel {
		text-align: center;
		height: 30px;
		line-height: 40px;
		width: 100%;
		display: flex;
		justify-content: center;
		border-top: 1px solid #f1f1f1;
	}
</style>